<template>
    <div class="newsinfo">
        <!-- 新闻头部 -->
        <header class="newsinfo-header">
            <h2 class="news-title">{{info.title}}</h2>
            <p class="mui-ellipsis">
                <span>发表时间：{{ info.add_time | date }}</span>
                <span>点击次数：{{ info.click }}次</span>
            </p>
        </header>

        <!-- 新闻内容区域 -->
        <!-- 注意：通过 v-html 指令动态生成的内容，不管页面中的内容，scope对其无效 -->
        <div class="content" v-html="info.content">
        </div>
        <!--comment-->
        <div class="comment">
            <h2 class="comment-header">发表评论</h2>
            <textarea cols="30" rows="5" placeholder="请输入评论内容，最多120字" maxlength="120" v-model="content"></textarea>
            <mt-button type="primary" size="large" @click="sendComment">发表评论</mt-button>
            <ul class="comment-content">
                <li class="comment-item" v-for="(item,index) in list" :key="index">
                    <h3>
                        <span>第{{index + 1}}楼</span>
                        <span>用户：{{item.user_name}}</span>
                        <span>发表时间:{{item.add_time | date}}</span>
                    </h3>
                    <p v-text="item.content"></p>
                </li>
            </ul>
            <mt-button type="primary" size="large" plain @click="getMore">加载更多</mt-button>
        </div>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'

    export default {
        created() {
            this.getNewsInfo();
            this.getComment();
        },

        data() {
            return {
                info: {},
                list: [],
                page: 1,
                content: ''
            }
        },

        methods: {
            getNewsInfo() {
                // 使用 ES6中的字符串模板得到字符串
                // ${} 在字符串模板中表示引用参数
                var url = `api/getnew/${this.$route.params.id}`
                this.$http.get(url)
                    .then(resp => {
                        var data = resp.data;

                        if (data.status === 0) {
                            // 注意：接口返回数据的格式，不管是列表还是对象，返回的都是：数组
                            this.info = data.message[0]
                        }
                    })
            },
            getComment() {
                var url = `api/getcomments/${this.$route.params.id}?pageindex=${this.page}`;
                this.$http.get(url)
                    .then(resp => {
                        var data = resp.data;
                        if (data.status === 0) {
                            this.list = this.list.concat(data.message)
                        }
                    })
            },
            getMore() {
                this.page += 1;
                this.getComment()
            },
            sendComment() {
                var url = `api/postcomment/${this.$route.params.id}`;
                this.$http.post(url, `content=${this.content}`)
                    .then(resp => {
                        var data = resp.data;
                        if (data.status === 0) {
                            this.list.unshift({
                                add_time: new Date(),
                                content: this.content,
                                user_name: "匿名"
                            });
                            Toast({
                                message: '评论成功',
                                duration: 1000
                            });
                            this.content = ''
                        }
                    })
            }
        }
    }
</script>

<style lang="scss">
    .newsinfo {
        .newsinfo-header {
            padding: 5px;
        }

        .content {
            border-top: 1px solid #ccc;
            padding: 10px 5px 0;

            img {
                // 解决 图片 太宽，设置图片宽度以屏幕宽度为准
                width: 100%;
            }
        }

        .news-title {
            font-size: 18px;
        }
        .mui-ellipsis {
            color: #26a2ff;
            margin: 10px 0 0 0;

            display: flex;
            justify-content: space-between;
        }
    }

    .comment {
        border-top: 1px solid #ddd;
        padding: 10px;
        .comment-header {
            font-size: 22px
        }
        .comment-content {
            list-style: none;
            margin: 0;
            padding: 0;
            .comment-item {
                h3 {
                    font-weight: 500;
                    font-size: 14px;
                    display: flex;
                    justify-content: space-between;
                    background-color: #ddd;
                    height: 20px;
                    line-height: 20px;
                }
                p {
                    padding-left: 10px;
                    color: #000000;
                }
            }
        }
    }
</style>
